<template>
	<el-row>
		<el-col class="top">
			<label>统计首页</label>
		</el-col>
		<el-col>
			<div id="eChart"></div>
		</el-col>
	</el-row>
</template>
<script type="text/javascript">
	export default{
		name:'StatisticMain',
		data(){
			return{
				curUser:{},
				charData:{
					xData:[],
					yData:[]
				}
			}
		},
		mounted(){
			let vm =this;
			vm.curUser = vm.$cookies.get("curUser");
			vm.$axios.getOutpatient(vm.curUser.hospitalCode).then(function(res){
				if (res.data&&res.data.data) {
						vm.charData.xData = res.data.data.xData;
						vm.charData.xData.forEach(function(date,index){
							vm.charData.xData[index] =date + '\n\n'+vm.commonUtil.dateToWeek(date);
						});
						vm.charData.yData = res.data.data.yData;
						vm.drawLine();
					}
			});
		},
		methods:{
			drawLine:function(){
				 // 基于准备好的dom，初始化echarts实例
				 var vm = this;
		        let myChart = vm.$echarts.init(document.getElementById('eChart'));
		         myChart.setOption({
		            title: { 
		            	show:true,
		            	text: '近期每日接诊量',
		            	 x:'center'
		            },
		            tooltip: {},
		            legend: {
		            	x:'right',
				        data:['接诊量','折线']
				    },
		            xAxis: {
		                data: vm.charData.xData,
		                name: "日期"
		            },
		            yAxis: {
		            	type: 'value',
		            	name: "接诊量"
		            },
		            series: [{
		                name: '接诊量',
		                type: 'bar',
		                barWidth:40,
		                itemStyle: {
					        normal: {
					            color: "#1e90ff",
					            label:{
					            	show:true,
					            	color:"#000000"
					            },
					            lineStyle: {
					                color: "#2ec7c9"
					            }
					        }
					    },
		                data: vm.charData.yData
		            },{
		                name: '折线',
		                type: 'line',
		                itemStyle: {
					        normal: {
					            color: "#FF8800",
					            label:{
					            	show:true,
					            	position:'top',
					            	color:"#FF8800"
					            },
					            lineStyle: {
					                color: "#FF8800"
					            }
					        }
					    },
		                data: vm.charData.yData
		            }]
		        });
			}
		}
	}
</script>
<style type="text/css" scoped>
	.top{
		font-weight: bolder;
		line-height: 45px;
		height: 45px;
		border-bottom: 1px dashed #eeeeee;
	}
	#eChart{
		width: 100%;
		height: 600px;
	}
</style>